<template>
	<view class="wrap-item" v-if="item">
		<view class="title-bg f-30 flex">
			<view class="must" v-if="item.require">*</view>

			<view class="title">我的推广</view>
		</view>

		<view class="group-list flex column m-t-30">
			<block v-for="(groupItem, index) in list" :key="index">
				<view class="group-item flex align-center" @click="onChooseGroup(groupItem)" v-if="groupItem.isShow">
					<view class="group-choose">
						<image
							v-if="value === groupItem.id"
							class="group-img"
							:src="$staticImagePath('common/choose_select.png')"
						/>
						<image v-else class="group-img" :src="$staticImagePath('common/choose_normal.png')" />
					</view>

					<image class="icon" :src="$staticImagePath(groupItem.icon)" />

					<view class="group-name f-30">{{ groupItem.title }}</view>

					<view
						class="recommend-bg flex align-center"
						@click="onChooseRecommend(groupItem)"
						v-if="value === groupItem.id"
					>
						<view class="limit-num-line f-30">
							{{ recommend_name === "" ? groupItem.place : recommend_name }}
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
			/**
			 * 店铺ID
			 */
			shopID: {
				type: String,
				default: "",
			},
			/**
			 * 商品ID
			 */
			goodsID: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				recommend_name: "", //推广的名称
				shop_type: "", //店铺类型
				shopname: "", //店铺名称
				shop_id: "", //店铺ID
			};
		},
		computed: {
			list() {
				return [
					{
						title: "店铺",
						icon: "publish/shop_icon.png",
						id: "1",
						place: "请选择推广的店铺",
						isShow: true,
					},
					{
						title: "商品",
						icon: "publish/goods_icon.png",
						id: "0",
						place: "请选择推广的商品",
						type: "0",
						isShow: this.shop_type === "1",
					},
					{
						title: "套餐/卡券",
						icon: "publish/package_icon.png",
						id: "2",
						place: "请选择推广的套餐/卡券",
						type: "1",
						isShow: this.shop_type === "0",
					},
					{
						title: "自提商品",
						icon: "publish/goods_icon.png",
						id: "3",
						place: "请选择自提商品",
						type: "2",
						isShow: this.shop_type === "0",
					},
					{
						title: "同城配送",
						icon: "publish/goods_icon.png",
						id: "4",
						place: "请选择同城配送商品",
						type: "3",
						isShow: this.shop_type === "0",
					},
				];
			},
		},
		mounted() {
			uni.$on("chooseRecommendItem", (obj) => {
				const index = this.list.findIndex((item) => item.type === obj.type);
				this.recommend_name = `推广的${this.list[index].title}:${obj.item.title}`;
				this.$emit("update:goodsID", obj.item.id);
			});

			this.$commonNetwork.getUserIdenInfoData((res) => {
				this.shop_id = res.shop_id.id;
				this.shopname = res.shop_id.shopname;
				this.shop_type = res.shop_id.shop_type;
			});
		},
		methods: {
			/**
			 * 选择
			 */
			onChooseGroup(groupItem) {
				this.recommend_name = "";
				this.$emit("input", groupItem.id);
				this.$emit("update:goodsID", "");
				this.$emit("update:shopID", "");

				if (groupItem.id === "1") {
					//店铺
					this.recommend_name = `推广的店铺:${this.shopname}`;
					this.$emit("update:shopID", this.shop_id);
				}
			},
			/**
			 * 选择商品或者图片
			 */
			onChooseRecommend(groupItem) {
				if (groupItem.id === "1") {
					return;
				}
				this.$jump.to(`/pages/publish/chooseRecommend?type=${groupItem.type}&title=${groupItem.place}`);
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/css/publish.css";

	.icon {
		width: 40rpx;
		height: 40rpx;
	}

	.group-list {
		gap: 30rpx;
	}

	.group-item {
		height: 60rpx;
	}

	.recommend-bg {
		flex: 1;
		height: 60rpx;
		overflow: hidden;
		background-color: #f6f6f6;
		padding: 0 10rpx;
		box-sizing: border-box;
		color: #333333;
		--limit-num: 1;
	}
</style>
